<template>
  <div class="subscribe" :class="{ PcStyle: fun.getPhoneEnv() == 3 }">
    <c-title text="认购活动"></c-title>
    <van-swipe :autoplay="3000" indicator-color="white" class="swipe">
      <van-swipe-item v-for="(item, i) in imagelist" :key="i">
        <img :src="item.img_url" alt class="swipe-image" @click="link(item.web_link ? item.web_link : '')" />
      </van-swipe-item>
    </van-swipe>
    <div class="record">
      <div class="record-item" @click="goto('subscribeDesc')">
        <img src="../../assets/images/subscribe/description.png" alt class="image" />
        <div>规则说明</div>
      </div>
      <div class="record-item" @click="goto('subscribeRewardRecord')">
        <img src="../../assets/images/subscribe/reward-record.png" alt class="image" />
        <div>认购奖励</div>
      </div>
      <div class="record-item" @click="goto('subscribeReward')" style="width: 6rem;">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/subscribe/subscribe_reward.png"
          alt class="image" />
        <div>级差奖励</div>
      </div>
       <div class="record-item" @click="goto('poor_reward')">
        <img src="../../assets/images/subscribe/poor-reward.png" alt class="image" />
        <div>激活奖励</div>
      </div>
      <div class="record-item" @click="goto('subscribeRecord')"  style="width: 6rem;">
        <img src="../../assets/images/subscribe/subscription-record.png" alt class="image" />
        <div>认购记录</div>
      </div>

    </div>
    <keep-alive>
      <activity-box v-if="activity_list && activity_list.length !== 0" :activity_list="activity_list" ref="ActivityRoot"
        @activeInfo="activeInfo"></activity-box>
    </keep-alive>
    <div class="activity-time" v-if="active_status == 0">
      <div class="item" :class="{ active: item.status == 2 }" v-for="(item, i) in status_list" :key="i">
        <template v-if="item.status == 3">
          <div class="no-start">
            <div>
              {{ item.start }}
            </div>
            <div class="count-down-box">
              <div class="text" style="margin-right: 0.5rem; color: #f15656; font-weight: 800; font-size: 0.8rem;">
                倒计时:{{ down_day(item.diffInSeconds) }}
              </div>
              <van-count-down :time="item.diffInSeconds * 1000" class="bottom_time1" format="HH时mm分ss秒">
                <template #default="timeData">
                  <em style="font-size: 0.8rem; font-weight: 800;">{{ timeData.hours < 10 ? `0${timeData.hours}` :
                      timeData.hours
                  }}</em>
                      <b>:</b>
                      <em style="font-size: 0.8rem; font-weight: 800;">{{ timeData.minutes < 10 ? `0${timeData.minutes}` :
                          timeData.minutes
                      }}</em>
                          <b>:</b>
                          <em style="font-size: 0.8rem; font-weight: 800;">{{ timeData.seconds < 10 ?
                              `0${timeData.seconds}` : timeData.seconds
                          }}</em>
                </template>
              </van-count-down>
            </div>
          </div>
        </template>
        <template v-else>
          <div>{{ item.start }}~{{ item.end }}</div>
          <div>{{ item.status == 1 ? '未开始' : '进行中' }}</div>
        </template>
      </div>
    </div>
    <list :loading="loading" :text="'暂无活动'" :datas="listData" :noMore="noMore" @getMoreData="getMoreData">
      <div class="goods" v-for="(item, i) in listData" :key="i">
        <div class="image">
          <img :src="item.thumb" alt />
        </div>
        <div>
          <div>
            <div class="title">{{ item.title }}{{ item.round_serial }}轮{{ item.serial }}期</div>
            <div class="quota" v-if="item.limit_min && item.limit_max">每人限购：{{ item.limit_min }}-{{ item.limit_max }}
            </div>
            <div class="quota">认购数量：{{ item.buy_quantity }}</div>
          </div>
          <div class="tosubscribe" @click="tosubscribe(item)" v-if="item.status == 2">去认购</div>
          <van-progress v-if="item.status !== 2" :percentage="item.percentage" pivot-color="#f14e4e"
            style="width: 10rem;" />
        </div>
        <div class="status status0" v-if="item.status !== 2">{{ item.status_name }}</div>
      </div>
    </list>
    <!-- 认购弹窗 -->
    <van-popup ref="popRef" v-model="show" position="bottom" get-container="body" round closeable
      @click-close-icon="closePopup">
      <div class="suvscribe-serial">【{{ info.title }}】{{ info.round_serial }}轮{{ info.serial }}期</div>
      <div class="pop-subscribe">
        <div style="color: #f15656; margin-bottom: 1rem;">每人限购：{{ info.limit_min }}-{{ info.limit_max }}</div>
        <input type="text" @focus="Input_focus" class="input" v-model.number="count" placeholder="认购数量：" />
        <div class='flex between m-b-10' v-if="point_switch && is_privilege == 2">
          <span>扣除{{ point_name }}</span>
          <van-switch v-model="integralSwitch.deduct" @change="change('deduct')"  inactive-color="#E2E2E3" size="0.875rem"
            active-color="#EF3532" />
        </div>
        <div class='flex between m-b-10' v-if="integral_switch && is_privilege == 2">
          <span>扣除{{ integral_pay }}{{integral_name}}</span>
          <van-switch v-model="integralSwitch.deduction"
          @change="change('deduction')" inactive-color="#E2E2E3" size="0.875rem"
            active-color="#EF3532" />
        </div>
        <div class="deduct">
          扣除{{ love_pay }}{{ love_name }},{{ point_pay }}{{point_name}}
          <template v-if=" is_privilege == 2">
            <!-- <template v-if="point_switch">,{{ point_pay }}{{ point_name }}</template> -->
            <template v-if="integralSwitch.deduction && integral_switch ">
              ,{{ integral_pay }}{{integral_name}}
            </template>
          </template>
        </div>
        <van-button @click.stop="setShow" class="submit" :disabled="loading" :loading="loading" color="#ef3532">确认
        </van-button>
      </div>
    </van-popup>
    <!-- 认购规则  -->
    <div v-if="show1" class="rule-box">
      <div class="block">
        <div class="title">认购规则</div>
        <div style="width: 100%; max-height: 20rem; overflow-y: auto; margin: 0.5rem 0;" v-html="contentRule"></div>
        <div class="isagree">
          <van-checkbox v-model="checked" checked-color="#ee0a24" icon-size=".8rem">我已阅读并同意认购规则</van-checkbox>
        </div>
        <div class="button-box" style="margin-top: 0.5rem;">
          <div class="confirm" @click.stop="closeShow1">确认</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixins from "./components/mixins";
import { Dialog } from 'vant';
import activityBox from "./components/activity";
export default {
  mixins: [mixins],
  components: { activityBox },
  data() {
    return {
      loading: false,
      active_current: 0,
      contentRule: "",
      show: false,
      show1: false,
      checked: false,
      imagelist: [],
      activity_list: [],
      under_way: "",
      no_started: "",
      end_time: "",
      status_list: [],
      info: {},
      count: "",
      love_name: "",
      point_name: "",
      btn_flag: true,
      timer_ID:null,
      height: '40%',
      monitorKeyboard: null,
      integral_name:'',//消费积分自定义昵称
      is_buying: false,//是否优先认购
      member_integral: 0,//消费积分
      point_switch: false,//积分按钮开关
      integral_switch: false,//消费积分按钮开关
      integralSwitch: {
        deduct: false,
        deduction: false
      },
      integral_pay: 0,//消费积分数量
      is_privilege: 1,//是否优先认购
      love_pay: 0,//支付爱心值
      point_pay: 0,//支付消费积分
      disabled: false,//单独开关禁启用
      // flag:false
    };
  },
   activated() {
    this.getDataCategory()

  },
  methods: {
    change(type){
        this.get_ready()
      // if(this.integral_switch && this.point_switch){
      //   this.flag = true;
      // }
      if(type == 'deduct'){
        if(this.integralSwitch.deduction){
          this.integralSwitch.deduction=!this.integralSwitch.deduction;
        }
      }else{
        if(this.integralSwitch.deduct){
          this.integralSwitch.deduct = !this.integralSwitch.deduct
        }
      }

      if(this.integral_switch && this.point_switch){
        if(!this.integralSwitch.deduct && !this.integralSwitch.deduction){
          this.$toast(`请选择优先认购类型!`)
        }
      }
    },
    closePopup() {
      this.show = false;
      this.count = '';
      this.integral_pay = 0;
      this.point_pay = 0;
      this.love_pay = 0;
      this.is_privilege = 1;
    },
    down_day(seconds) {
      if (seconds > 86400) {
        let day = parseInt(seconds / 86400) + "天";
        return day;
      } else {
        return "";
      }
    },
    link(url) {
      if (url) {
        window.location.href = url;
      }
    },
    //iphone输入框聚焦影响van-tabs
    Input_focus() {
      this.$refs.ActivityRoot.active = this.active_current;
      if (this.fun.isIosOrAndroid() !== "ios") {
        this.height = '60%';
      }
    },
    getDataCategory(){
      let category_id = 0;
      location.hash.split('&').forEach(item => {
        if(item.includes('category_id')){
          category_id = item.match(/\d+/g)[0];
        }
      })
      $http.post("plugin.subscription.frontend.modules.category.controllers.page.index",{category_id}).then(({ result, data, msg }) => {
        console.log(result)
        if (result) {
          this.show1 = !data.is_signed;
          this.activity_list = data.activity_list;
          this.imagelist = data.banner_list;

          if (!data.is_signed) {
            this.getRule();
          }
        } else if(result == 0){
          this.getdata();
        }
      });
    },
    getMoreData(){
      if(this.page>=this.last_page){
        return;
      }
      let page = this.page + 1;
      $http.post("plugin.subscription.frontend.modules.activity.controllers.detail.index", {
        activity_id: this.active_current,
        stage_status: this.active_status,
        page
      }).then(res => {
        if (res) {

          this.page = res.data.stage_list.current_page;
          this.last_page =  res.data.stage_list.last_page;
          this.listData = this.listData.concat(res.data.stage_list.data)
        }
      });
    },
    getdata() {
      $http.post("plugin.subscription.frontend.modules.activity.controllers.page.index").then(({ result, data, msg }) => {
        if (result) {
          this.show1 = !data.is_signed;
          this.activity_list = data.activity_list;
          this.imagelist = data.banner_list;

          if (!data.is_signed) {
            this.getRule();
          }
        } else {
          this.$toast(msg);
        }
      });
    },
    getRule() {
      $http.post("plugin.subscription.frontend.modules.treaty.controllers.content.index").then(({ result, msg, data }) => {
        if (result) {
          this.contentRule = data.content;
        } else {
          this.$toast(msg);
        }
      });
    },
    setShow() {
      if (!this.btn_flag) {
        return false;
      }
      this.loading = true;
      this.btn_flag = false;
      let json = {
        stage_id: this.info.id,
        quantity: this.count,
      }
      if (this.is_privilege == 2) {
        if (this.integralSwitch.deduct && this.point_switch) {
          json.privilege_type = 'point'
        }else if(this.integralSwitch.deduction && this.integral_switch){
          json.privilege_type = 'integral'
        }else{
              json.privilege_type = ""
        }
      }
      $http
        .post("plugin.subscription.frontend.modules.stage.controllers.buy.generate", json)
        .then(res => {
          this.loading = false;
          this.btn_flag = true;
          if (res.result) {
           Dialog.alert({
              message: res.msg
           })
            .then(() => {
              this.show = false;
              this.count = '';
              this.love_pay = 0;
              this.integral_pay = 0;
              this.point_pay = 0;
              this.getAgainData()
            })
          }else{
             Dialog.alert({
              message: res.msg
           })
            .then(() => {
            })
          }
        });
    },
    //重新获取数据
    getAgainData() {
      $http.post("plugin.subscription.frontend.modules.activity.controllers.detail.index", {
        activity_id: this.active_current,
        stage_status: this.active_status
      }).then(res => {
        if (res) {
          this.status_list = res.data.stage_slot || [];
          this.page = res.data.stage_list.current_page;
          this.listData = res.data.stage_list.data || [];
        }
      });
    },
    closeShow1() {
      if (!this.checked) {
        this.$toast("请勾选协议");
      } else {
        $http.post("plugin.subscription.frontend.modules.treaty.controllers.agree.index").then(res => {
          if (res.result) {
            this.$toast(res.msg);
          } else {
            this.$toast(res.msg);
          }
        });
        this.show1 = false;
      }
    },
    tosubscribe(data) {
      let json = {
        stage_id: data.id,
        quantity: 1
      }
      $http.post("plugin.subscription.frontend.modules.stage.controllers.buy.ready", json).then(res => {
        if (res.result) {
          let { point_switch, integral_switch, is_privilege,integral_pay } = res.data;
          this.integral_switch = integral_switch == 0 ? false : true;
          this.point_switch = point_switch == 0 ? false : true;
          this.is_privilege = is_privilege;
          this.integral_pay = integral_pay
          // if (integral_switch == 1 && point_switch == 1) {
          //   this.flag = false;
            // this.integralSwitch.deduct = true;
            // this.integralSwitch.deduction = false;
            // this.disabled = false;
          // } else{
            // this.disabled = true;
            // if (integral_switch == 1) {
            //   this.integralSwitch.deduction = true;
            // } else if(point_switch==1) {
            //   this.integralSwitch.deduct= true;
            // }
          // }
        }
      })
      this.height = '40%';
      this.info = data;
      this.show = true;
    },
    get_ready() {
       let json = {
          stage_id: this.info.id,
          quantity:this.count
        }
      $http.post("plugin.subscription.frontend.modules.stage.controllers.buy.ready", json).then(res => {
        if (res.result) {
          let { integral_pay, point_switch, integral_switch, love_pay, point_pay } = res.data;
          // this.integral_switch = integral_switch == 0 ? false : true;
          // this.point_switch = point_switch == 0 ? false : true;
          this.integral_pay = integral_pay;
          this.point_pay = point_pay;
          this.love_pay = love_pay;
          // if (!this.integralSwitch.deduct) {
          //   this.love_pay = this.count;
          // } else {
          // }


        }
      })
    },
  },
  watch: {
    count(v) {
        if(this.timer_ID){clearTimeout(this.timer_ID)}
        this.timer_ID = setTimeout(() => {
          this.get_ready()
        }, 500)
    },
    // "integralSwitch.deduct": function (v) {
    //   if (this.is_privilege == 2) {
    //     if (this.integral_switch && this.point_switch) {
    //       if (v && this.integralSwitch.deduction) {
    //         this.integralSwitch.deduction = !this.integralSwitch.deduction;
    //       } else if (!v && !this.integralSwitch.deduction) {
    //         this.integralSwitch.deduction = !this.integralSwitch.deduction;
    //       }
    //       if (!v) {
    //         this.love_pay = this.count;
    //       } else {
    //         this.love_pay = this.count - this.point_pay;
    //       }
    //       if (this.integral_switch && this.point_switch && this.flag) {
    //         this.$toast(`必须选择${this.point_name}或${this.integral_name}其中一种抵扣类型`)
    //       }
    //     } else {
    //       if (!v) {
    //         this.love_pay = this.count;
    //       } else {
    //         this.love_pay = this.count - this.point_pay;
    //       }
    //     }
    //   } else if (this.is_privilege == 1) {
    //     if (!v) {
    //       this.love_pay = this.count;
    //     } else {
    //       this.love_pay = this.count - this.point_pay;
    //     }
    //   }
    // },
    // "integralSwitch.deduction": function (v) {
    //   if (this.is_privilege == 2) {
    //     if (v && this.integralSwitch.deduct) {
    //       this.integralSwitch.deduct = !this.integralSwitch.deduct;
    //     } else if (!v && !this.integralSwitch.deduct) {
    //       let json = {
    //         stage_id: this.info.id,
    //         quantity: this.count
    //       }
    //       this.get_ready(json)
    //       this.integralSwitch.deduct = !this.integralSwitch.deduct;
    //     }
    //     if (this.integral_switch && this.point_switch && this.flag) {
    //       this.$toast(`必须选择${this.point_name}或${this.integral_name}其中一种抵扣类型`)
    //     }
    //   }
    // }

  }
};
</script>
<style scoped lang="scss">
$m: 0.5rem;

::v-deep .van-count-down {
  font-size: 0.75rem;
}

.m-b-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.between {
  justify-content: space-between;
}

.suvscribe-serial {
  font-size: 1rem;
  padding-top: 0.8125rem;
  color: #202020;
  text-align: center;
}

.pop-subscribe {
  // margin-top: 4.375rem;
  padding: 1.625rem 0.625rem 1.875rem;

  // position: absolute;
  // left: 0;
  // right: 0;
  // bottom: 15px;
  .submit {
    display: block;
    width: 100%;
  }

  .deduct {
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  .input {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    margin: 0 auto;
    height: 2rem;
    padding-left: 1rem;
  }
}

.rule-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  z-index: 15;
}

.PcStyle {
  width: 375px;

  .block {
    width: 17.66rem !important;
  }
}

.subscribe {
  text-align: left;
  padding: 0 $m;

  .bottom_time1 {
    display: flex;
    color: #f15656;
  }

  .count-down-box {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
  }

  .no-start {
    display: flex;
    font-size: 0.75rem;
    align-items: center;
    flex-direction: column;
  }

  .swipe {
    margin: $m 0;

    .swipe-image {
      width: 100%;
      height: 9.4rem;
      border-radius: 0.3rem;
    }
  }

  .record {
    margin: $m 0;
    width: 100%;
    height: 5.31rem;
    background-color: #fff;
    border-radius: 0.31rem;
    font-size: 0.75rem;
    color: #333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    line-height: 1.3rem;
    overflow-x: auto;

    .record-item {
      // margin-right: 1rem;
      // margin-left: 1rem;
      width: 5rem;

      .image {
        width: 2.19rem;
        height: 2.19rem;
      }
    }
  }

  .activity-time {
    width: 100%;
    overflow-x: auto;
    margin: $m 0;
    display: flex;
    text-align: center;
    justify-content: space-evenly;

    .item {
      // width: 33.3%;
      // padding: $m 1.5rem;
      padding: 1rem 0.4rem;
      font-size: 0.75rem;
    }

    .active {
      background-color: #fff;
      border-radius: 0.31rem;
      font-size: 0.81rem;
      color: #fb700e;
    }
  }

  .goods {
    position: relative;
    margin: $m 0;
    background-color: #fff;
    border-radius: 0.31rem;
    padding: $m;
    display: flex;
    overflow: hidden;

    .image {
      width: 5.38rem;
      height: 5.38rem;
      margin-right: $m;

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;
      width: 3rem;
      height: 1.5rem;
      line-height: 1.5rem;
      border-radius: 0 0 0 0.31rem;
      color: #fff;
      font-size: 0.63rem;
      text-align: center;
    }

    .status0 {
      background-color: #f14e4e;
    }

    .status1 {
      background-color: #ff8924;
    }

    .title {
      line-height: 1rem;
      font-size: 0.81rem;
      color: #242424;
      width: 13rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .quota {
      color: #818080;
      font-size: 0.69rem;
      line-height: 1rem;
      margin: 0.2rem 0;
    }

    .tosubscribe {
      position: absolute;
      bottom: 9%;
      right: 3%;
      width: 5.3rem;
      height: 2rem;
      line-height: 2rem;
      background-color: #f15656;
      border-radius: 0.13rem;
      font-size: 0.69rem;
      color: #fff;
      text-align: center;
    }

    ::v-deep .van-progress {
      margin: $m 0;

      .van-progress__pivot {
        line-height: 1.2;
      }

      .van-progress__portion {
        background-color: #f14e4e;
      }
    }
  }

  .block {
    width: 17.66rem;
    background-color: #fff;
    border-radius: 0.31rem;
    padding: 0.94rem;

    .title {
      text-align: center;
      font-size: 1rem;
      color: #202020;
    }

    .input {
      margin: 0.94rem 0;
      height: 2rem;
      line-height: 2rem;
      border: solid 0.03rem #dbdbdb;
      width: 15.78rem;
      border-radius: 0.19rem;
      padding: 0 $m;
    }

    .isagree {
      display: flex;
      justify-content: center;

      ::v-deep .van-icon {
        line-height: 1;
      }
    }

    .button-box {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-top: 1.5rem;

      // div {
      //   width: 4.69rem;
      //   line-height: 1.88rem;
      //   background-color: #d1d1d1;
      //   border-radius: 0.94rem;
      // }

      .confirm {
        width: 4.69rem;
        height: 1.88rem;
        line-height: 1.88rem;
        background-color: #ef3532;
        color: #fff;
        border-radius: 0.94rem;
      }

      .cancel,
      .submit {
        width: 4.69rem;
        height: 1.88rem;
        line-height: 1.88rem;
        background-color: #d1d1d1;
        border-radius: 0.94rem;
      }
    }
  }

  // ::v-deep .van-popup {
  //   border-radius: 0.5rem;
  // }

  .flex {
    display: flex;
  }

  .block-integral,
  .consumption-points {
    display: flex;
    justify-content: space-between;
  }
}
</style>
